<template>
  <div>
    <div class="search_box">
      <!-- 返回上一级 -->
      <div>
        <van-icon name="arrow-left" @click="returns" />
      </div>
      <!-- 搜索框 -->
      <div>
        <van-search v-model="msg" placeholder="请输入搜索关键词" />
      </div>
      <!-- 搜索按钮 -->
      <div @click="addsearch">
        {{ msg == "" ? "取消" : "搜索" }}
      </div>
    </div>
    <div v-show="msg == ''">
      <div class="history">
        <p class="p1_search_lxy">历史记录</p>
        <div @click="del" class="edit_lxy">清空</div>
      </div>
      <div class="flex">
        <div v-for="(item, index) in historyList" :key="index">{{ item }}</div>
      </div>
    </div>
    <!-- 图文渲染数据 -->
    <div>
      <ul class="ul_box">
        <li v-for="(item, index) in addsearchlist.list" :key="index">
          <div class="box">
            <p class="p1_lxy">{{ item.title }}</p>
            <p id="p2_lxy">共{{ item.course_type }}课时</p>
            <div>
              <img :src="item.teachers_list[0].teacher_avatar" />
              <span>{{ item.teachers_list[0].teacher_name }}</span>
            </div>
          </div>
          <div class="div_bottom_lxy">
            <p>{{ item.sales_num }}人已报名</p>
            <p id="p1"></p>
            <p @click="Todetail(item.id)" class="a1">免费</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Icon } from "vant";
import { Search } from "vant";
import { Searchs } from "../request/http"; //搜索接口
export default {
  components: {
    [Icon.name]: Icon, //icon图标
    [Search.name]: Search, //搜索
  },
  data() {
    return {
      value: "",
      msg: "",
      historyList: [],
      teacherList: [],
      show: false,
      addsearchlist: [],
    };
  },
  mounted() {
    this.getSearchs();
  },
  methods: {
    //返回上一级
    returns() {
      window.history.back();
    },
    //获取搜索的接口
    getSearchs() {
      Searchs().then((res) => {
        console.log(res);
        this.teacherList = res.list;
        console.log(this.teacherList);
      });
    },

    //搜索按钮
    addsearch() {
      console.log("111");
      Searchs({ keywords: this.msg }).then((res) => {
        console.log(res);
        this.addsearchlist = res;
      });
    },

    //清空
    del() {},

    is(a) {
      if (a == "") {
        this.teacherList = [];
      }
    },
  },
};
</script>


<style lang="scss">
*{
  margin: 0;
  padding: 0;
  vertical-align: middle;

}
.search_box {
  width: 100%;
  display: flex;
  height: 60px;
  background: #f7f8fa;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid lightgray;
  .div_1 {
    font-size: 20px;
  }
}
.history {
  display: flex;
  justify-content: space-between;
  width: 90%;
  padding: 0 5%;
  align-items: center;
}
.flex {
  display: inline-flex;
  align-items: center;
  width: 90%;
  padding: 0 5%;
  margin: 20px 0;
  flex-wrap: wrap;
}
.flex > div {
  overflow: hidden;
  padding: 2px 10px;
  font-size: 12px;
  background-color: gainsboro;
  margin: 2%;
}
.p1_search_lxy {
  font-size: 15px;
}
.edit_lxy {
  font-size: 15px;
}
// 图文
.ul_box {
  width: 100%;
  li {
    background: white;
    width: 100%;
    height: 200px;
    border-radius: 10px;
    margin-top: 10px;
    .p1_lxy {
      width: 100%;
      font-size: 20px;
      padding-top: 20px;
      margin-left: 20px;
    }
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      padding-top: 10px;
      margin-left: 20px;
    }
    span {
      display: inline-block;
      font-size: 15px;
      color: #cccccc;
      margin-left: 15px;
    }
    .box {
      border-bottom: 2px solid gainsboro;
      width: 98%;
      height: 140px;
      margin-top: 10px;
      margin-left: 3px;
    }
    #p2_lxy {
      font-size: 13px;
      margin-top: 5px;
      margin-left: 20px;
      color: rgb(87, 83, 83);
    }
    .div_bottom_lxy {
      width: 100%;
      height: 60px;
      //   background: lavender;
      display: flex;
      align-items: center;
      justify-content: space-around;
      p {
        &:nth-child(1) {
          color: #cccccc;
          font-size: 15px;
        }
        &:nth-child(2) {
          width: 50%;
        }
      }
      .a1 {
        color: rgb(132, 177, 42);
        font-size: 17px;
      }
    }
  }
}
</style>